<template>
    <el-row justify="space-between" class="wrap">
        <div class="col-center">
            <div id="editormd"></div>
            <div class="footer">
                <el-button @click="save" size="mini" type="primary">保存</el-button>
            </div>
        </div>
        <div class="col-right">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-row>
</template>

<script>
    import { defineComponent, watch, reactive } from 'vue'

    export default defineComponent({
        name: 'EditorMd',
        props: {
            height: {
                type: Number,
                require: true,
                default: 640,
            },
        },
        setup(props) {
            let editorMd = null
            let activities = reactive([
                {
                    content: 'Event start',
                    timestamp: '2018-04-15',
                },
                {
                    content: 'Approved',
                    timestamp: '2018-04-13',
                },
                {
                    content: 'Success',
                    timestamp: '2018-04-11',
                },
            ])

            watch(
                () => props.height,
                (nval) => {
                    editorMd = editormd('editormd', {
                        width: '100%',
                        height: nval - 55,
                        syncScrolling: 'single',
                        path: '/public/js/editormd/lib/',
                    })
                }
            )

            function save() {
                const content = editorMd.getMarkdown()
                console.log(content)
            }

            return {
                activities,
                save,
            }
        },
    })
</script>

<style lang="less" scoped>
    .wrap {
        width: 98%;
        margin: auto;
        .col-left {
            width: 100%;
            height: 200px;
        }
        .col-center {
            width: 88%;
            .footer {
                display: flex;
                align-items: flex-start;
                height: 40px;
            }
        }
        .col-right {
            width: 12%;
        }
    }
</style>
